import Page from "@/components/Page";
import { defineComponent, ref } from "vue";
import mation from "./asserts/mation.png";
import info from "./asserts/info.png";
import affindex from "./asserts/affindex.png";
import aff from "./asserts/aff.png";
import server from "./asserts/server.png";
import policy from "./asserts/policy.png";
import protect from "./asserts/protect.png";
import tomato from "./asserts/tomato.png";
import mesIcon from "./asserts/message-icon.png";
import mase1 from "./asserts/mase1.png";
import mase2 from "./asserts/mase2.png";
import mase3 from "./asserts/mase3.png";
import mase4 from "./asserts/mase4.png";
import sell1 from "./asserts/sell1.png";
import sell2 from "./asserts/sell2.png";
import sell3 from "./asserts/sell3.png";
import sell4 from "./asserts/sell4.png";
import click from "./asserts/click.png";
import mapAdd from "./asserts/add.png";
import style from "./index.module.less";
import Cart from "@/components/Card";
import Box from "@/components/Box";
import Title from "../applicationList/components/Title";
import IconText from "@/components/IconText";
import { useRouter } from "vue-router";
import { useRequest } from "./request";
import apiTool, {
  getUserTypeValue,
  isDh,
  phoneNumControl,
} from "@/command/apiTool";
import phoneIcon from "@/assets/image/phone_icon.png";
import * as vant from "vant";
import RowView from "@/components/RowView";
import RoundInfo from "@/components/RoundInfo";
import ColView from "@/components/ColView";
import TextView from "@/components/TextView";
import RoundImg from "@/components/RoundImg";
import CardView from "@/components/CardView";
import { Icon } from "vant";
import { getSize } from "@/command/apiTool";
const { showFailToast } = vant;

export default defineComponent({
  setup(props, {}) {
    const router = useRouter();
    const { topUserInfo, queryMyteam, teamNewInfo, newInfoList } = useRequest();
    const renderUserInfo = () => {
      return (
        <div class={[style["user-info"]]}>
          <p class={["font--t6"]}>镇海区农业农村局</p>
          <div class={["mt-20", style["card-box"]]}>
            <div class={["font--t6", style["text1"]]}>
              {topUserInfo.value.userName}
              {topUserInfo.value.mccName && (
                <span class={["font--t1"]}>{topUserInfo.value.mccName}</span>
              )}
            </div>
            <div class={["font--t5 mt-8", style["text2"]]}>
              种植品种: {topUserInfo.value.productTypeName}
            </div>
            {/* <div
              class={["font--t3 mt-30", style["text3"]]}
              onClick={() => router.push("/richdimensional")}
            >
              <img src={Ew} alt="" />
              <div>我的共富码</div>
            </div> */}
          </div>
          <div class={[style["farmer"]]}></div>
        </div>
      );
    };
    const renderFormation = () => {
      console.log("teamNewInfo.value", teamNewInfo.value);

      return (
        <CardView
          title="我的结队"
          class={"mt-[10px]"}
          right={() =>
            !isDh() ? (
              <span
                class="blue-text"
                onClick={() => router.push("/partneredMap")}
              >
                结对地图
                <Icon name="arrow" size={getSize(12)} />
              </span>
            ) : (
              <div></div>
            )
          }
        >
          <div class={[style["formatiom"]]}>
            {/* <div class={["font--t6 mb-10"]}>我的结队</div> */}
            {teamNewInfo.value.phone && (
              <div
                class={[
                  "font--t1",
                  style["text-top"],
                  " flex justify-between pr-10",
                ]}
                style={{ color: "#AAAAAA" }}
              >
                <div class={"flex"}>
                  <div class={[style["text1"]]}>
                    <img src={mesIcon} alt="" class={" !w-[13px] !h-[13px]"} />
                    {/* <div>我的结队</div> */}
                  </div>
                  <div class={["mr-16 ml-10"]}>
                    用户{phoneNumControl(teamNewInfo.value.phone)}
                    向你发起结对申请
                  </div>
                </div>
                <div>{teamNewInfo.value.beforeTime || ""}</div>
              </div>
            )}
            {isDh() && (
              <div class={"flex justify-start"}>
                <IconText
                  class={"icon-text-col-bg ml-8 mr-8 mt-10"}
                  url={mapAdd}
                  text={"结队地图"}
                  iconSize={50}
                  onClick={() => router.push("/partneredMap")}
                />
                <div class={["horizontal"]}>
                  {queryMyteam.value.map((item: any, index: any) => {
                    return (
                      <IconText
                        class={"icon-text-col-bg ml-8 mr-8 mt-10"}
                        url={item.memberLogo}
                        text={item.memberName}
                        iconSize={50}
                        onClick={() =>
                          router.push(`/formationDetail?id=${item.memberId}`)
                        }
                      />
                    );
                  })}
                </div>
              </div>
            )}
            {!isDh() && (queryMyteam.value as any).memberId && (
              <div
                onClick={() => {
                  router.push(
                    `/formationDetail?id=${(queryMyteam.value as any).memberId}`
                  );
                }}
              >
                <RowView class="justify-between">
                  <RoundInfo
                    class="homepage-sell"
                    src={(queryMyteam.value as any).memberLogo}
                    title={(queryMyteam.value as any).memberName}
                    v-slots={{
                      bottomLabel: () => {
                        return (
                          <ColView>
                            <TextView>
                              种植品种:{" "}
                              {(queryMyteam.value as any).productTypeName}
                            </TextView>
                            <TextView>
                              结队时间: {(queryMyteam.value as any).createDate}
                            </TextView>
                          </ColView>
                        );
                      },
                    }}
                  />
                  <ColView class="items-center justify-center">
                    <RoundImg
                      src={phoneIcon}
                      class="w-[44px] h-[44px]"
                      onClick={() =>
                        apiTool.phoneClick((queryMyteam.value as any).phone)
                      }
                    />
                  </ColView>
                </RowView>
              </div>
            )}
          </div>
        </CardView>
      );
    };
    const renderAffluent = () => {
      return (
        <Box text="共同富裕">
          <div class={["flex--betwwen", style["affluent-box"]]}>
            <Cart
              text1="共富积分"
              padding="0px"
              v-slots={{
                top: () => (
                  <div class={[style["text2"]]}>
                    <div style={{ color: "#4459FF" }}>1569</div>
                    <img src={aff} alt="" />
                  </div>
                ),
              }}
              onClick={() => {
                // showFailToast("功能暂未开放");
                router.push("/affluentIntegral");
              }}
            ></Cart>
            <Cart
              text1="共富指数"
              padding="0px"
              v-slots={{
                top: () => (
                  <div class={[style["text2"]]}>
                    <div style={{ color: "#00CA16 " }}>92</div>
                    <img src={affindex} alt="" />
                  </div>
                ),
              }}
              onClick={() => {
                // showFailToast("功能暂未开放");
                router.push("/eachRichData");
              }}
            ></Cart>
          </div>
        </Box>
      );
    };
    const renderService = () => {
      return (
        <Box text="服务带富">
          <div class={[style["service"]]}>
            <div class={["flex--betwwen"]}>
              <div class={[style["left-box"]]}>
                <Cart
                  width={162}
                  height={166}
                  text1="帮用工"
                  text2=" 一键解决用工问题"
                  boxPadding="0"
                  padding="6px 0 0 10px"
                  onClick={() => router.push("/helpEmployingRichWorkers")}
                >
                  <img src={server} alt="" />
                </Cart>
              </div>
              <div class={[style["right-box"]]}>
                <Cart
                  height={78}
                  text1="保供服务"
                  text2="一方有难 八方帮保供"
                  class={["mb-10"]}
                  onClick={() => router.push("/collateralSupply")}
                >
                  <img src={protect} alt="" />
                </Cart>
                <Cart
                  height={78}
                  text1="政策服务"
                  text2="最新政策 抢先看"
                  onClick={() => router.push("/helpPolicy")}
                >
                  <img src={policy} alt="" />
                </Cart>
              </div>
            </div>
          </div>
        </Box>
      );
    };

    const renderTechnology = () => {
      return (
        <Box text="技术带富">
          <div class={["flex--betwwen", style["technology-box"]]}>
            <Cart
              width={159}
              height={166}
              text1="帮选品种"
              text2="结对大户 帮选品种"
              onClick={() => {
                getUserTypeValue() == "dh"
                  ? router.push("/assortingVarietydh")
                  : router.push("/assortingVarietyxh");
              }}
            >
              <img src={tomato} alt="" />
            </Cart>
            <Cart
              width={159}
              height={166}
              text1="帮授经验"
              text2="帮授经验 不走弯路"
              onClick={() => router.push("/helpTeachExperience")}
            >
              <img src={info} alt="" />
            </Cart>
          </div>
        </Box>
      );
    };

    const mass = ref([
      {
        text: "帮检测",
        img: mase1,
        onClick: () => {
          getUserTypeValue() == "dh"
            ? router.push("/helpDetectionDh")
            : router.push("/helpDetectionXh");
        },
      },
      {
        text: "帮溯源",
        img: mase2,
        onClick: () => {
          getUserTypeValue() == "dh"
            ? router.push("/helpTraceabilityDh")
            : router.push("/helpTraceabilityXh");
        },
      },
      {
        text: "精选农资",
        img: mase3,
        onClick: () => {
          getUserTypeValue() == "dh"
            ? router.push("/choiceness")
            : router.push("/choicenessXh");
        },
      },
      {
        text: "数字基地示范",
        img: mase4,
        onClick: () => {
          // showFailToast("功能暂未开放");
          router.push("/demonstrationMap");
        },
      },
    ]);
    const renderMass = () => {
      const messages = newInfoList.value.map((e: any) => {
        let maskedPhoneNumber = phoneNumControl(e.phone);
        return {
          text: `用户${maskedPhoneNumber}过平台发布了帮检测需求...`,
          time: e.beforeTime,
        };
      });
      return (
        <Box text="质量带富">
          <div class={[style["mass"]]}>
            <div
              class={["font--t1", style["text-top"]]}
              style={{ color: "#AAAAAA" }}
            >
              <div class={["flex--start"]}>
                <div class={[style["text1"]]}>
                  <img src={mation} alt="" />
                </div>
                <div class={[""]}>{messages[0].text}</div>
              </div>
              <div>{messages[0].time}</div>
            </div>
            <div class={style["mass-box"]}>
              {mass.value?.map((item: any) => (
                <div
                  class={[style["mass-content"]]}
                  onClick={() => item.onClick()}
                >
                  <img src={item.img} alt="" />
                  <div class={["wt font--t4"]}>{item.text}</div>
                </div>
              ))}
            </div>
          </div>
        </Box>
      );
    };
    const sell = [
      {
        text: "帮存储",
        ba: sell1,
        // url: "/helpStorage",
        onClick: () => {
          window.location.href =
            "/api/oauth2/authorize?response_type=token&client_id=gxlk&scope=userInfo&state=gxlk";
        },
      },
      {
        text: "帮品牌",
        ba: sell2,
        url: "/gangbrand",
      },
      {
        text: "帮展销",
        ba: sell3,
        url: "/helpExhibitSell",
      },
      {
        text: "帮滞销",
        ba: sell4,
        url: "/helpUnsalable",
      },
    ];
    const renderSell = () => {
      return (
        <Box text="销售带富">
          <div class={[style["sell"]]}>
            <div class={["flex--betwwen"]}>
              {sell?.map((item: any) => (
                <Cart
                  width={74}
                  height={145}
                  text1={item.text}
                  bgColor="none"
                  class={[style["sell-content"]]}
                  style={{ backgroundImage: `url(${item.ba})` }}
                  onClick={() => {
                    if (item.onClick) {
                      item.onClick();
                    } else {
                      router.push(item.url);
                    }
                  }}
                >
                  <img src={click} alt="" />
                </Cart>
              ))}
            </div>
            {/* <div class={[style["sell-box2"]]}>
              <div class={["font--t6 mb-10"]}>销售带富</div>
              <div class={[style["text"]]}>疫情保供应 鲜蔬菜水果安心送</div>
              <div class={["flex--betwwen"]}>
                <div class={[style["sell2-left"]]}>
                  <img src={sellLeft} alt="" />
                  <div class={[style["sell2-left-bt"]]}>
                    <div class={["ml-8 mt-6"]}>
                      <div class={["wt font--t4"]}>疫情果蔬套餐A</div>
                      <div
                        style={{
                          color: "#C80000",
                          fontWeight: 700,
                        }}
                      >
                        <span style={{ fontSize: "6px" }}>￥</span>39.7
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div class={[style["sellRight-box"]]}>
                    <div class={["flex--betwwen", style["sellRight"]]}>
                      <img src={sellRight} alt="" />
                      <div class={["ml-8 mt-6"]}>
                        <div class={["wt font--t4"]}>现摘新鲜水果...</div>
                        <div
                          style={{
                            color: "#C80000",
                            fontWeight: 700,
                          }}
                        >
                          <span style={{ fontSize: "6px" }}>￥</span>
                          12.5
                        </div>
                      </div>
                    </div>
                    <div class={["flex--betwwen", style["sellRight"]]}>
                      <img src={sellRight} alt="" />
                      <div class={["ml-8 mt-6"]}>
                        <div class={["wt font--t4"]}>现摘新鲜水果...</div>
                        <div
                          style={{
                            color: "#C80000",
                            fontWeight: 700,
                          }}
                        >
                          <span style={{ fontSize: "6px" }}>￥</span>
                          12.5
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class={[
                      ["wt font--t4"],
                      style["sell2-left-bt"],
                      style["sell2-left-bt2"],
                    ]}
                  >
                    全部商品
                  </div>
                </div>
              </div>
            </div> */}
          </div>
        </Box>
      );
    };
    return () => (
      <Page padding={0} class={["overflow-y-auto"]} tabbar={true}>
        <div class={["p-14", style["index"]]}>
          <Title class="" />
          <div>{renderUserInfo()}</div>
          <div>{renderFormation()}</div>
          <div>{renderAffluent()}</div>
          <div>{renderService()}</div>
          <div>{renderTechnology()}</div>
          <div>{renderMass()}</div>
          <div>{renderSell()}</div>
        </div>
      </Page>
    );
  },
});
